<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        Vue中的事件修饰符：
            1.prevent：阻止默认事件（常用）
            2.stop：阻止事件冒泡（常用）
            3.once：事件只触发一次（常用）
            4.capture：使用事件的捕获模式
            5.self：只有event.target是当前操作的元素时才触发事件
            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
     -->

    <div id ="app">
        <h2>欢迎来到{{name}}</h2>

        <!-- 事件修饰符：prevent(阻止默认事件) -->
        <a href="https://baidu.com" @click.prevent="showInfo">点我提示信息</a>

        <br>
        <!-- 
            事件修饰符：stop(阻止事件冒泡) 
                未使用stop修饰符时，会分别响应button和div的showInfo函数
                当使用stop修饰符时，在响应button的showInfo函数后就停止了，不会向上冒泡
        -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>

        <br>
        <!-- 
            事件修饰符：once（事件只触发一次）
                未使用once修饰符时，每次点击按钮都会触发showInfo函数
                当使用once修饰符时，只有在第一次点击按钮时才会触发showInfo函数，后续再点击按钮都不会触发
         -->
         <button @click.once="showInfo">点我提示信息</button>

         <br>
         <!-- 
            事件修饰符：capture（事件的捕获模式）
                未使用capture修饰符时，点击box2时依次输出2和1
                当使用capture修饰符时，点击box2时依次输出1和2
         -->
         <div class="box1" style="height: 50px; background-color: red;" @click.capture="showMsg(1)">
            div1
            <div class="box2" style="height: 50px; background-color: yellow;" @click="showMsg(2)">
                div2
            </div>
         </div>

         <br>
         <!-- 
             事件修饰符：self（只有event.target是当前操作的元素时才触发事件）
                未使用self修饰符时，点击button后会冒泡响应到div的showInfo函数
                当使用self修饰符时，点击button后，由于事件的target是button，所以div的showInfo函数无法响应
          -->
          <div class="demo2" @click.self="showInfo">
              <button @click="showInfo">点我提示信息</button>
          </div>

          <br>
          <!-- 
              事件修饰符：passive（事件的默认行为立即执行，无需等待事件回调执行完毕）
                测试案例中要求响应函数比较耗时
                未使用passive修饰符时，只有listWheel回调函数执行完成后才能响应下一次滚轮事件
                当使用passive修饰符时，不需要等待回调函数执行完成，可以直接响应下一次滚轮事件
           -->
           <ul @wheel="listWheel" style="width: 200px; height: 200px; background-color: peru; overflow: auto;">
               <li style="height: 100px;">1</li>
               <li style="height: 100px;">2</li>
               <li style="height: 100px;">3</li>
               <li style="height: 100px;">4</li>
           </ul>

    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            data: {
                name:'尚硅谷'
            },
            methods: {
                showInfo(e) {
                    alert('不跳转')
                },
                showMsg(msg) {
                    console.log(msg)
                },
                listWheel() {
                    for (let i = 0; i < 10000; i++) {
                        console.log("#");
                    }
                    console.log("滚动")
                }
            }
        });
    </script>
</body>
</html>